<template>
  <!-- 反馈收集 -->
  <div class="contact">
    <el-table :data="contactData" style="width: 100%">
      <el-table-column prop="date" label="日期">
        <template #default="scope">
          <span>{{ formatDate(new Date()) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ly" label="主题"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="tel" label="手机"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="qq" label="QQ"> </el-table-column>
      <el-table-column prop="desc" label="内容"> </el-table-column>
      <el-table-column label="是否处理">
        <template #default="scope">
          <el-switch
            style="display: block"
            v-model="scope.row.reading"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="已阅读"
            inactive-text="未阅读"
            @change="switchState(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ContactManager",
  data() {
    return {
      contactData: [], //反馈存储的数据
    };
  },
  methods: {
    async getcontactData() {
      //获取所有的反馈数据
      let { data } = await this.$axios({
        method: "GET",
        url: "/administer/contact",
      });
      if (data.code) return; //没有数据
      this.contactData = data.data;
    },
    // 时间格式转换
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate(),
        hh = d.getHours(),
        mm = d.getMinutes(),
        ss = d.getSeconds();
      hh = hh < 10 ? "0" + hh : hh;
      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      return `${YY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
    },
    // 点击开关修改状态
    async switchState(item){
      let {data} = await this.$axios({
        method:"POST",
        url: "/administer/contact/update",
        data:{
          id:item._id,
          reading:item.reading
        }
      });
      // console.log(data);
      if(data.code) return this.$message.error("未阅读");
      this.getcontactData()

    }
  },
  created() {
    this.getcontactData();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table__row {
  font-size: 12px;
}
/deep/ .cell .el-switch span{
  line-height: 1;
  margin-left: -5px;
  font-size: 12px;
  }
</style>